import React, { Component } from "react";
import PropTypes from 'prop-types';

/* 
  1.安装插件  npm install --save prop-types
  2.导入属性验证的插件 import PropTypes from 'prop-types';
  3.使用组件名.propTypes 来进行设置属性
  4.name:PropTypes.string  添加指定类型
*/

const Header = (props) => {
  return (
    <>
      <div>欢迎来到 {props.name}----{props.num} 班级</div>
    </>
  );
};  

//给组件添加属性验证
//设置的时候要用小写的 propTypes
// 设置类型的时候要用大写的 PropTypes
Header.propTypes = {
  name:PropTypes.string,//指明为字符串类型
  num:PropTypes.number,//指明为数值类型
  title:PropTypes.oneOfType([   //设置为多类型属性
    PropTypes.string,
    PropTypes.number,
    PropTypes.bool//定义布尔类型
  ]),
  age:PropTypes.number.isRequired //设置为必传属性
};




class Content extends Component {
  render() {
    // console.log(this);
    return (
      <>
        <div> {this.props.contentName} 学习 React 实际上就是在学 JavaScript </div>
      </>
    );
  }
}


export default class App extends Component {
  render() {
    return (
      <div>
        <Header name="H5-2218" num={10} title={true} age={12}></Header>
        <Content contentName='张一' />
      </div>
    );
  }
}
